<template>
  <div class="wrapper">
    <div class="crumbs">
      <router-link :to="'/assets/cause?type=freeze_fund'">
        <el-button :type="chooseButton('freeze_fund')">资金原因</el-button>
      </router-link>
      <router-link :to="'/assets/cause?type=freeze_integral'">
        <el-button :type="chooseButton('freeze_integral')">积分原因</el-button>
      </router-link>
    </div>
    <div class="crumbs">
      <el-form ref="formInline" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户账号/冻结原因">
          <el-input v-model="formInline.keywords" placeholder="请输入……" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch('formInline')">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="list" :stripe="true" :border="true" :highlight-current-row="true">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="资产类型" prop="type_text"></el-table-column>
      <el-table-column label="冻结资产/元" prop="money" :formatter="minuteFormat"></el-table-column>
      <el-table-column label="冻结操作人" prop="user_info.nickname"></el-table-column>
      <el-table-column label="被冻结用户" prop="opposite_info.nickname"></el-table-column>
      <el-table-column label="冻结原因" prop="reason"></el-table-column>
      <el-table-column label="冻结时间" prop="create_time"></el-table-column>
      <el-table-column label="状态" prop="freeze_status" :formatter="statusFormat"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button v-if="scope.row.type === 'freeze_fund'" size="small" @click="info(scope.$index, scope.row)">查看资金冻结详情</el-button>
          <el-button v-if="scope.row.type === 'freeze_integral'" size="small" @click="info(scope.$index, scope.row)">查看积分冻结详情</el-button>
          <el-button v-if="scope.row.freeze_status === 0" size="small" @click="unfreeze(scope.$index, scope.row)">解冻资金</el-button>
          <el-button v-if="scope.row.freeze_status === 1" size="small" disabled>解冻资金</el-button>
          <el-button v-if="scope.row.freeze_status === null" size="small" disabled>解冻资金</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="pageData.per_page"
        :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'

  export default {
    data () {
      return {
        formInline: {
          keywords: ''
        }
      }
    },
    created () {
      this.getList()
    },
    computed: {
      ...mapState({
        list: state => state.cause.list,
        pageData: state => state.cause.pageData
      }),
      type () {
        // 默认为获取资金原因分页列表
        if (this.$route.query.type === undefined) {
          return 'freeze_fund'
        }
        return this.$route.query.type
      }
    },
    methods: {
      // 默认为获取资金原因分页列表
      async getList () {
        let payload = {
          page: this.pageData.current_page,
          list_rows: this.pageData.per_page,
          keywords: this.$route.query.keywords,
          type: this.type
        }
        await this.$store.dispatch('cause/getList', payload)
      },
      onSearch (formName) {
        const self = this
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.$router.push({path: '/assets/cause', query: {type: self.type, keywords: self.formInline.keywords}})
            self.getList()
          }
        })
      },
      info (index, row) {
        this.$store.commit('cause/CAUSE_SAVE_DATA', row)
        this.$router.push('/assets/causeinfo')
      },
      unfreeze (index, row) {
        if (row.type === 'freeze_fund') {
          this.$router.push({name: 'FundunFreeze', params: {user_id: row.user_id, id: row.id}})
        } else {
          this.$router.push({name: 'IntegralunFreeze', params: {user_id: row.user_id, id: row.id}})
        }
      },
      // 点击页面时，跳转到相应页面
      handleCurrentChange (val) {
        this.pageData.current_page = val
        this.getList()
      },
      // 按钮选中时的状态
      chooseButton (val) {
        return val === this.type ? 'success' : ''
      },
      // 处理状态的展示
      statusFormat (row) {
        if (row.freeze_status === 1) {
          return '已全部解冻'
        }
        return '未全部解冻'
      },
      // 把分化为元的操作
      minuteFormat (row, column) {
        return Number(row[column.property] / 100)
      }
    },
    watch: {
      type: function () {
        this.searchData = {}
        this.getList()
      }
    }
  }
</script>

<style scoped>
  .crumbs {
    display: inline-block;
    vertical-align: top;
    margin-right: 50px;
  }
</style>
